<template>
    <div class="userinfo">
        <navbar></navbar>
        <div class="background">
            <img v-if="user.background" :src="user.background">
            <img v-else src="../assets/bannerTop_new.png">
            <span class="iconfont icon-wenda" @click="$router.push({path:'/chat',query:{uuid:user.uuid}})"></span>
        </div>
        <visitorDetails :user="user"></visitorDetails>
        <user-article></user-article>
    </div>
</template>

<script>
    import navbar from "@/components/common/navbar";
    import visitorDetails from "@/components/UserComponents/visitorDetails";
    import UserArticle from "@/components/UserComponents/userArticle";

    export default {
        components: {UserArticle, navbar, visitorDetails},

        data() {
            return {
                model: {},
                user: {
                    background: ""
                }
            }
        },
        mounted: async function () {
            const res = await this.$http.get("/user/userinfo", {
                params: {
                    uuid: this.$route.query.uuid
                }
            })
            const user = res.data.data
            this.user = user
            if (res.data.data.img) {
                // user.img = this.$http.baseURL + "/" + res.data.data.img
                user.img = res.data.data.img

                if (res.data.data.background) {
                    // user.background = this.$http.baseURL + "/" + res.data.data.background
                    user.background = res.data.data.background

                }
            }

        },
        methods: {}
    }
</script>

<style lang="less">
    .userinfo {
        .background {
            height: 41.67vw;
            position: relative;
            overflow: hidden;

            .uploading {
                position: absolute;
                opacity: 0;
            }

            img {
                width: 100%;
                height: auto;
                max-width: 100%;
                max-height: 100%;
            }
            .icon-wenda{
                position: absolute;
                right: 0;
                color: white;
                font-size: 30px;
                margin-right: 10px;
                margin-top: 5px;
            }
        }
    }
</style>